<polymer-element name="g-progress" attributes="value">
  <!-- TODO(dfreedman): remove from global when crbug.com/227260 is fixed -->
  <style polymer-scope="global">
    ::-webkit-progress-bar {
      border-radius: 1rem;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.175));
      box-shadow:
      inset 0 1px 0 rgba(0,0,0,0.08),
      0 0 1px rgba(0,0,0,0.03),
      0 1px 0 rgba(255,255,255,0.2);
      overflow: hidden;
    }
    ::-webkit-progress-value {
      border-radius: 1rem;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7));
      transition: width 300ms linear;
    }
  </style>
  <template>
    <style>
      #shadow {
        display: -webkit-flex;
      }
      #bar {
        height: 1rem;
        -webkit-flex: 1 auto;
        -webkit-appearance: none;
      }
    </style>
    <div id="shadow">
      <progress id="bar" value={{value}}>
    </div>
  </template>
  <script>
    Polymer('g-progress', {
      value: 0
    });
  </script>
</polymer-element>
